<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" class="sepBread">
      <el-breadcrumb-item :to="{ path: '/OrderManagement' }" class="kehu">客户管理
      </el-breadcrumb-item>
      <el-breadcrumb-item class="yonghu">用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <el-row>
      <el-input
        v-model.trim="input"
        placeholder="请输入要查询的用户姓名或手机号"
        class="input1"
      ></el-input>
      <el-button type="primary" class="btn2" @click="handelList"
        >查询</el-button
      >
    </el-row>
    <el-row class="but1">
      <el-button type="primary" class="btn3" @click="addUser"
        >+ 添加用户</el-button
      >
      <el-button type="primary" class="btn3" @click="exportExcel"
        >+ 导出用户</el-button
      >
    </el-row>
    <el-row>
      <el-table :data="userList" style="width: 100%">
        <el-table-column prop="id" label="ID" width="330px"> </el-table-column>
        <el-table-column prop="username" label="用户名" width="330px">
        </el-table-column>
        <el-table-column prop="phoneNum" label="手机号" width="330px">
        </el-table-column>
        <el-table-column prop="lastLoginInt" label="最后登录时间" width="330px">
        </el-table-column>
        <el-table-column label="操作" width="330px">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="handleEdit(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageObj.current"
          :page-size="pageObj.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageObj.total"
        >
        </el-pagination>
      </div>
    </el-row>
    <div v-for="item in tableData" :key="item.id"></div>
  </div>
</template>

<script >
import router from "@/router";
import LoginVue from "../../views/Login.vue";
export default {
  name: "usermanagement",
  data() {
    return {
      input: "",
      // currentPage1: 5,
      // currentPage2: 5,
      // currentPage3: 5,
      current: 1,
      // input: "",
      userList: [],
      tableData: [],
      pageObj: {
        current: 1,
        size: 3,
        total: 0,
      },
    };
  },

  methods: {
    handleSizeChange(val) {
      this.pageObj.size = val;
      this.handelList();
    },
    handleCurrentChange(val) {
      this.pageObj.current = val;
      this.handelList();
    },
    addUser() {
      this.$router.push({
        path: "/adduser",
      });
    },
    handleEdit(row) {
      /*  */
      this.$router.push({
        path: "/adduser",
        query: {
          id: row.id,
        },
      });
    },
    //查询列表
    handelList() {
      let params = {
        limit: this.pageObj.size,
        page: this.pageObj.current,
        phoneNum: "",
        username: "",
      };
      let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if (reg.exec(this.input)) {
        params.phoneNum = this.input;
      } else {
        params.username = this.input;
      }
      this.$axios({
        url: "/userManagement/list",
        method: "post",
        data: params,
      }).then((res) => {
        if (res.data.code == 0) {
         
          this.userList = res.data.data;
          this.pageObj.total = res.data.count;
        }
      });
    },
    //导出列表
    exportExcel() {
      this.$axios({
        url: "/userManagement/export",
        method: "get",
        params: {},
        responseType: "blob", //返回的数据类型
      }).then((res) => {
        let bolb = new Blob([res.data]);
        let url = window.URL.createObjectURL(bolb);
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", "用户列表.xlsx");
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link); //下载完成移除元素
        window.URL.revokeObjectURL(url); //释放掉blob对象
      });
    },
  },
  created() {
    this.handelList();
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.h1 {
  padding-left: 40px;
  padding-bottom: 20px;
  padding-top: 20px;
}

.input1 {
  width: 400px;
  padding-top: 15px;
  padding-left: 30px;
  padding-right: 10px;
}

.but1 {
  padding-left: 30px;
  padding-top: 30px;
  padding-bottom: 20px;
}

.page {
  padding-left: 255px;
  padding-top: 20px;
  /* text-align: center; */
}

.btn2 {
  height: 40px;
  width: 60px;
}

.btn3 {
  height: 40px;
  width: 120px;
}
.block {
  text-align: center;
}
.but1 {
  margin-top: -10px;
}

.el-breadcrumb {
    font-size: 20px;
    line-height: 10px;
}
.kehu{
  margin-bottom: 20px;
}

</style>
